<!DOCTYPE html>
<html>

<head>
    <title>fatline test</title>
    <script type="text/javascript" src="https://unpkg.com/gcoord@0.2.3/dist/gcoord.js"></script>
    <script type="text/javascript" src="https://unpkg.com/dat.gui@0.7.6/build/dat.gui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.js"></script>
    <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
    <!--fatline script-->
    <!-- https://threejs.org/examples/#webgl_lines_fat -->
    <script type="text/javascript"
        src="https://unpkg.com/three@0.138.0/examples/js/lines/LineMaterial.js"></script>
    <!---->
    <!-- <script type="text/javascript" src="./https://unpkg.com/maptalks.three@latest/dist/maptalks.three.js"></script> -->
    <script type="text/javascript"
        src="https://unpkg.com/maptalks.three@latest/dist/maptalks.three.js"></script>
    <script type="text/javascript"
        src="https://unpkg.com/three@0.138.0/examples/js/libs/stats.min.js"></script>
    <style>
        html,
        body {
            margin: 0px;
            height: 100%;
            width: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            background-color: black;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <div id="map1" class="map"></div>
    <script>

        var map = new maptalks.Map("map", {
            "center": [116.43305229108887, 39.8373701757873], "zoom": 11.02119126427157, "pitch": 64.4000000000001, "bearing": 2.400000000000091,
            // bearing: 180,

            centerCross: true,
            doubleClickZoom: false,
            baseLayer: new maptalks.TileLayer('tile', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });


        // the ThreeLayer to draw buildings
        var threeLayer = new maptalks.ThreeLayer('t', {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true
            // animation: true
        });


        threeLayer.prepareToDraw = function (gl, scene, camera) {

            stats = new Stats();
            stats.domElement.style.zIndex = 100;
            document.getElementById('map').appendChild(stats.domElement);

            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);
            addLines();
        };
        threeLayer.addTo(map);

        var highlightmaterial = new THREE.LineMaterial({
            linewidth: 4,
            // side: THREE.BackSide,
            color: 'yellow',
            dashSize: 0.1,
            gapSize: 0.1,
            dashed: true
            // opacity: 0.8,
        });
        // highlightmaterial.defines.USE_DASH = '';

        var selectMesh = [];
        var lines = [];
        var colors = ['#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'].reverse();
        // data from https://lbs.amap.com/demo/loca-v2/demos/cat-line/bj-bus
        function addLines() {
            fetch('https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json').then(function (res) {
                return res.json();
            }).then(function (geojson) {
                geojson.features.forEach(f => {
                    f = gcoord.transform(f, gcoord.AMap, gcoord.WGS84);
                });
                for (let i = 0, len = colors.length; i < len; i++) {
                    //https://threejs.org/examples/#webgl_lines_fat
                    var material = new THREE.LineMaterial({
                        color: 0x00ffff,
                        transparent: true,
                        // vertexColors: THREE.VertexColors,
                        // side: THREE.BackSide,
                        linewidth: 2 // in pixels
                        // vertexColors: THREE.VertexColors,
                        // dashed: false
                    });
                    material.color.setStyle(colors[i]);
                    const features = geojson.features.map(f => {
                        f = Object.assign({}, f);
                        f.properties = { bottomHeight: i * 300 };
                        return f;
                    })

                    const line = threeLayer.toFatLines(features, { interactive: false }, material);
                    line.setToolTip('hello', {
                        showTimeout: 0,
                        eventsPropagation: true,
                        dx: 10
                    });

                    //infowindow test
                    line.setInfoWindow({
                        content: 'hello world',
                        title: 'message',
                        animationDuration: 0,
                        autoOpenOn: false
                    });

                    //event test
                    ['click', 'mousemove', 'empty', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) {
                        line.on(eventType, function (e) {
                            // console.log(e.type);
                            const select = e.selectMesh;
                            if (e.type === 'empty' && selectMesh.length) {
                                threeLayer.removeMesh(selectMesh);
                                selectMesh = [];
                            }

                            let data, baseObject;
                            // console.log(select)
                            if (select) {
                                data = select.data;
                                baseObject = select.baseObject;
                                if (baseObject && !baseObject.isAdd) {
                                    baseObject.setSymbol(highlightmaterial);
                                    threeLayer.addMesh(baseObject);
                                    selectMesh.push(baseObject);
                                }
                            }


                            if (selectMesh.length > 1) {
                                threeLayer.removeMesh(selectMesh);
                                selectMesh = [];
                            }


                            // override tooltip
                            if (e.type === 'mousemove' && data && baseObject) {
                                const id = baseObject.getId();
                                const tooltip = this.getToolTip();
                                tooltip._content = `id:${id}`;
                            }
                            //override infowindow
                            if (e.type === 'click' && data) {
                                const height = JSON.stringify(data.getProperties ? data.getProperties() : data.properties);
                                const infoWindow = this.getInfoWindow();
                                infoWindow.setContent(`property:${height}`);
                                if (infoWindow && (!infoWindow._owner)) {
                                    infoWindow.addTo(this);
                                }
                                this.openInfoWindow(e.coordinate);

                            }
                        });
                    });

                    threeLayer.addMesh(line);
                    lines.push(line);
                }
                animation();
                initGui();
                // initMap1Data();
            })
        }

        function animation() {
            // layer animation support Skipping frames
            threeLayer._needsUpdate = !threeLayer._needsUpdate;
            if (threeLayer._needsUpdate) {
                threeLayer.redraw();
            }
            stats.update();
            requestAnimationFrame(animation);
        }

        function initGui() {
            var params = {
                add: true,
                color: 0x00ffff,
                show: true,
                opacity: 1,
                altitude: 0,
                interactive: false
            };
            var gui = new dat.GUI();
            gui.add(params, 'add').onChange(function () {
                if (params.add) {
                    threeLayer.addMesh(lines);
                } else {
                    threeLayer.removeMesh(lines);
                }
            });
            // gui.addColor(params, 'color').name('line color').onChange(function () {
            //     material.color.set(params.color);
            //     lines.forEach(function (mesh) {
            //         mesh.setSymbol(material);
            //     });
            // });
            // gui.add(params, 'opacity', 0, 1).onChange(function () {
            //     material.uniforms.opacity.value = (params.opacity);
            //     lines.forEach(function (mesh) {
            //         mesh.setSymbol(material);
            //     });
            // });
            gui.add(params, 'show').onChange(function () {
                lines.forEach(function (mesh) {
                    if (params.show) {
                        mesh.show();
                    } else {
                        mesh.hide();
                    }
                });
            });
            gui.add(params, 'altitude', 0, 3000).onChange(function () {
                lines.forEach(function (mesh) {
                    mesh.setAltitude(params.altitude);
                });
            });
            gui.add(params, 'interactive').onChange(function () {
                lines.forEach(function (mesh) {
                    mesh.options.interactive = params.interactive;
                });
            });
        }
    </script>
</body>

</html>